import 'package:flutter/material.dart';

class TabbarPage extends StatefulWidget {
  const TabbarPage({super.key});

  @override
  State<TabbarPage> createState() => _TabbarPageState();
}

class _TabbarPageState extends State<TabbarPage> {
  List tabList = [
    {
      'label': '首页',
      'activeIcon': 'assets/tabbar/home-active.png',
      'icon': 'assets/tabbar/home.png',
    },
    {
      'label': '分类',
      'activeIcon': 'assets/tabbar/cate-active.png',
      'icon': 'assets/tabbar/cate.png',
    },
    {
      'label': '购物车',
      'activeIcon': 'assets/tabbar/cart-active.png',
      'icon': 'assets/tabbar/cart.png',
    },
    {
      'label': '我的',
      'activeIcon': 'assets/tabbar/user-active.png',
      'icon': 'assets/tabbar/user.png',
    }
  ];
  // 定义选中索引
  int currentIndex = 0;
  Widget _getBody() {
    if (currentIndex == 0) {
      return const Center(child: Text("首页"));
    } else if (currentIndex == 1) {
      return const Center(child: Text("分类"));
    } else if (currentIndex == 2) {
      return const Center(child: Text("购物车"));
    } else {
      return const Center(child: Text("我的"));
    }
  }
  @override
  Widget build(BuildContext context) {
    // 页面骨架
    return  Scaffold(
      appBar: AppBar(
        title: const Text('智慧商城',style: TextStyle(fontSize: 18),),
        centerTitle: true,
        backgroundColor: Colors.red,
        foregroundColor: Colors.white,
      ),
      body: IndexedStack(
        index: currentIndex,
        children: const [
          Text('首页'),
          Text('分类'),
          Text('购物车'),
          Text('我的'),
        ],
      ),
      // 底部TabBar
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: tabList.map((item) {
          return BottomNavigationBarItem(
            label: item["label"],
            icon: Image.asset(
              item["icon"],
              width: 20,
              height: 20,
            ),
            activeIcon: Image.asset(
              item["activeIcon"],
              width: 20,
              height: 20,
            ),
          );
        }).toList(),
        // 选中索引
        currentIndex: currentIndex,
        // 选中颜色
        selectedItemColor: Colors.red,
        // 未选中颜色
        unselectedItemColor: Colors.grey,
        // 点击事件
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
      ),
    );
  }
}